@scale-size: 0.6;

.select-seat {
  @room-bg-color: white;
  height: 100%;
  overflow: auto;

  background-color: @room-bg-color;

  // 工具栏
  .tool-box{
    background-color: white;
    box-shadow: 1px 1px 3px #8c8c8c;
    padding: 3px 5px;
    border-radius: 5px;
    z-index: 100;
  }

  // 团队栏
  .team-panel {
    background-color: white;
    box-shadow: 1px 1px 3px #8c8c8c;
    border-radius: 5px;
    z-index: 100;
  }

  // 颜色提示栏
  .hint-panel {
    background-color: white;
    box-shadow: 1px 1px 3px #8c8c8c;
    border-radius: 5px;
    min-width: 300px;
    max-width: 500px;
    min-height: 100px;
    z-index: 100;
    padding: 8px 10px;

    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    .hint {
      margin: 1px 5px;
      .color {
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 24px;
      }
    }
  }

  // 确认按钮
  .confirm-btn-panel {
    background-color: white;
    box-shadow: 1px 1px 3px #8c8c8c;
    border-radius: 5px;
    width: 150px;
    height: 60px;
    z-index: 100;

    padding:5px 8px;

    transition: display 0.5s;
    .btn {
      height: 50px;
    }
  }

  // 5种状态对应的颜色
  @color-unselected:rgb(194, 194, 194);
  @color-selected:rgb(18, 44, 102);
  @color-conflict:rgb(182,30,30);
  @color-highlight:rgb(56,164,32);
  @color-disabled:rgb(82,82,82);

  // 房间
  .room {
    background-color: white;
    box-shadow: 1px 1px 3px #8c8c8c;
    border-radius: 5px;

    // 座位块
    .seat-block {
      .seat-wrapper {

        // 未选中
        &.unselected {
          // 鼠标移过
          &:hover {
            div:not(.order-mark) {
              background-color: @color-selected;
            }
          }

          div:not(.order-mark) {
            background-color: @color-unselected;
          }
        }

        // 选中
        &.selected {
          div:not(.order-mark) {
            background-color: @color-selected;
          }
        }

        //
        &.conflict {
          div:not(.order-mark) {
            background-color: @color-conflict;
          }
        }

        &.disabled {
          div:not(.order-mark) {
            background-color: @color-disabled;
          }
        }

        &.highlight {
          div:not(.order-mark) {
            background-color: @color-highlight;
          }
        }

        // 点击后的标号
        .order-mark {
          position: absolute;
          width: @scale-size*30px;
          height: @scale-size*30px;
          border-radius: 50%;
          background-color: white;
          left: @scale-size*45px;
          top: @scale-size*60px;
          color: blue;
          text-align: center;
        }

        &.top {
          .order-mark {
            transform: rotate(0deg);
          }
        }

        // 椅子朝左
        &.left {
          .order-mark {
            transform: rotate(-270deg);
          }
        }

        // 椅子朝右
        &.right {
          .order-mark {
            transform: rotate(-90deg);
          }
        }

        // 椅子朝下
        &.bottom {
          .order-mark {
            transform: rotate(-180deg);
          }
        }

      }

    }
  }
}